<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .outer {
        width: 300px;
        height: 300px;
        background: red;
      }
      .center {
        width: 200px;
        height: 200px;
        background: blue;
      }
      .inner {
        width: 100px;
        height: 100px;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="center">
        <div class="inner"></div>
      </div>
    </div>
    <script>
      //e.target 获取触发当前事件的源头 如果是点击事件 是光标点在的最内层
      var outerEle = document.querySelector(".outer");
      var centerEle = document.querySelector(".center");
      var innerEle = document.querySelector(".inner");

      // 事件冒泡机制 ，从内向外依次触发事件执行；
      // 冒泡和捕获 通过 addEventListener 的第三个参数控制的：默认值是false（冒泡） true（捕获）

      //   window.addEventListener("click", function () {
      //     console.log("window");
      //   });

      //   document.addEventListener("click", function () {
      //     console.log("document");
      //   });
      //   document.documentElement.addEventListener("click", function () {
      //     console.log("html");
      //   });
      //   document.body.addEventListener("click", function () {
      //     console.log("body");
      //   });
      //   outerEle.addEventListener("click", function () {
      //     console.log("outer");
      //   });
      //   centerEle.addEventListener("click", function () {
      //     console.log("center");
      //   });
      //   innerEle.addEventListener("click", function (e) {
      //     // 触发的目标元素
      //     console.log(e.target);
      //     console.log("inner");
      //   });

      // 事件捕获
      document.addEventListener(
        "click",
        function () {
          console.log("document");
        },
        true
      );
      window.addEventListener(
        "click",
        function () {
          console.log("window");
        },
        true
      );
      document.documentElement.addEventListener(
        "click",
        function () {
          console.log("html");
        },
        true
      );
      document.body.addEventListener(
        "click",
        function () {
          console.log("body");
        },
        true
      );
      outerEle.addEventListener(
        "click",
        function () {
          console.log("outer");
        },
        true
      );
      centerEle.addEventListener(
        "click",
        function () {
          console.log("center");
        },
        true
      );
      innerEle.addEventListener(
        "click",
        function (e) {
          // 触发的目标元素
          console.log(e.target);
          console.log("inner");
        },
        true
      );
    </script>
  </body>
</html>
